feat(article): Add MD support #1451

WaDadidou · 2024-12-09T17:53:09Z

Needs, todos, etc => https://hackmd.io/@9Oh5kimjS1SP8xUWU_-Ovg/HkcuBoN4yx

We use this library to generate HTML from Markdown syntax: https://github.com/markdown-it/markdown-it
We use this library to render the HTML into JSX: https://github.com/meliorence/react-native-render-html

MarkdownIt

Here, we initialize MarkdownIt with some parameters, and use the Article message to render HTML: https://github.com/TERITORI/teritori-dapp/blob/feat-feed-article-markdown/packages/screens/FeedNewArticle/components/ArticleContentEditor/ArticleContentEditor.tsx#L53
We use the same MarkdownIt parameters at Article creation and Article consultation (WYSIWYG).

RenderHtml

We pass custom styles to RenderHtml. Each style item correspond to an html tag. So, there are a lot of customisable styles. We could customise the most used only: https://github.com/TERITORI/teritori-dapp/blob/feat-feed-article-markdown/packages/screens/FeedNewArticle/components/ArticleContentEditor/ArticleContentEditor.tsx#L169
Here are the currently customized styles: https://github.com/TERITORI/teritori-dapp/blob/feat-feed-article-markdown/packages/screens/FeedNewArticle/components/ArticleContentEditor/utils.ts#L14-L112

Temporary stuff. Please take attention to that: At the final, we'll have only one Article category, type, view, etc. These stuff will be merged with the actual "Article" stuff, and the mention "Markdown" will be removed in the future

ArticleMarkdown:

teritori-dapp/packages/utils/types/feed.ts

Line 22 in 0aae569

ArticleMarkdown,

ZodSocialFeedArticleMarkdownMetadata:

teritori-dapp/packages/utils/types/feed.ts

Line 111 in 0aae569

export const ZodSocialFeedArticleMarkdownMetadata = z.object({

FeedPostArticleMarkdownView:

teritori-dapp/packages/screens/FeedPostView/components/FeedPostArticleMarkdownView.tsx

Line 60 in a58719b

    
           // TODO: It's a copy of FeedPostArticleView.tsx, just made waiting for a posts UI (and data) refacto

SocialArticleMarkdownCard :

teritori-dapp/packages/components/socialFeed/SocialCard/cards/SocialArticleMarkdownCard.tsx

Line 39 in a58719b

    
           // TODO: It's a copy of SocialArticleCard.tsx, just made waiting for a posts UI (and data) refacto. => Merge them in the future

netlify · 2024-12-09T17:53:28Z

✅ Deploy Preview for gno-dapp ready!

Name	Link
🔨 Latest commit	`ad5c97c`
🔍 Latest deploy log	https://app.netlify.com/sites/gno-dapp/deploys/6772557baa0cb90008eae052
😎 Deploy Preview	https://deploy-preview-1451--gno-dapp.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

netlify · 2024-12-09T17:53:29Z

✅ Deploy Preview for teritori-dapp ready!

Name	Link
🔨 Latest commit	`ad5c97c`
🔍 Latest deploy log	https://app.netlify.com/sites/teritori-dapp/deploys/6772557bf138830008c557ca
😎 Deploy Preview	https://deploy-preview-1451--teritori-dapp.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

packages/components/socialFeed/SocialCard/cards/SocialArticleCard.tsx

packages/components/socialFeed/NewsFeed/NewsFeedInput.tsx

…cle tools

…t title numberOfLines

packages/screens/FeedNewArticle/components/ArticleContentEditor/utils.ts

clegirar · 2024-12-16T20:09:54Z

In term of UI what do you think about show borders for the editor and the preview ?

packages/screens/FeedNewArticle/FeedNewArticleScreen.tsx

clegirar · 2024-12-16T20:18:46Z

In term of behvior found that enough for a first version and we can iterate on add styles just after.
Cool to see this first version 🙂

MikaelVallenet · 2024-12-16T20:37:10Z

Would be nice to highlight the selected mode

MikaelVallenet · 2024-12-16T20:39:52Z

it would also be nice (in another PR since it's not the scope) but to use the start of the article to make a preview subtitle and let it optional to write a custom preview, if you agree i will open a new issue

WaDadidou · 2024-12-16T22:42:42Z

@clegirar

In term of UI what do you think about show borders for the editor and the preview ?

If you talk about the white borders, it's the same behavior than on other inputs.

I try to put this behavior on each input, I love this UI that highlights interactive elements on hover such as inputs or buttons.. In mobile format, I removed the white borders padding, because there is no hover.

If to talk about a separation between preview and edition, why not adding one, yes :) Personnaly I prefer pure without separation, it's enough excplicit

WaDadidou · 2024-12-16T22:57:47Z

Would be nice to highlight the selected mode

@MikaelVallenet @clegirar

These are draft buttons, I'm looking for better buttons, an other style for these buttons, maybe with icons, something cute.
I'll restyle these buttons

packages/utils/feed/markdown.ts

…kdown

…using domVisitors prop

hthieu1110 · 2024-12-28T13:07:10Z

packages/components/gradientText/GradientText.tsx

@@ -123,6 +123,8 @@ const gradient = (type: GradientType): LinearGradientProps => {
      return getMapPostTextGradient(PostCategory.Normal);
    case getMapPostTextGradientType(PostCategory.Article):
      return getMapPostTextGradient(PostCategory.Article);
+    case getMapPostTextGradientType(PostCategory.ArticleMarkdown):
+      return getMapPostTextGradient(PostCategory.Article);


Is this on purpose ?

Since we have a new PostCategory ArticleMarkdown (for now), yes

I completed the description

Please take attention to that: At the final, we'll have only one Article category, type, view, etc. These stuff will be merged with the actual "Article" stuff, and the mention "Markdown" will be removed in the future

hthieu1110 · 2024-12-28T14:53:05Z

packages/utils/feed/markdown.ts

+    fontFamily: "Exo_500Medium",
+    fontWeight: "500",


should we make a const for those repeated values ?

Yes!
a58719b

hthieu1110 · 2024-12-28T15:01:45Z

packages/screens/FeedPostView/components/FeedPostArticleMarkdownView.tsx

+          event.contentOffset.y >= event.contentSize.height - offsetPadding &&
+          isNextPageAvailable.value
+        ) {
+          fetchNextPage();


IMO, this code will be triggered every time onScroll event is fired, we should add isFetching flag to block that

FeedPostArticleMarkdownView is a copy of FeedPostArticleView.
FeedPostArticleView will be deleted soon (I hope)
We need to refacto the posts UI code. I don't want this PR being messy, the purpose is just to add a Markdown editor. But it implies to add a new PostCategory, so a new Zod type, so a new FeedPostBlablaView...
And all of these, temporary...

I forgot that could be slow down the review.

I don't know how to avoid adding this kind of copy without adding more complexity that will be removed just after

I completed the description

Please take attention to that: At the final, we'll have only one Article category, type, view, etc. These stuff will be merged with the actual "Article" stuff, and the mention "Markdown" will be removed in the future

n0izn0iz · 2024-12-29T12:35:19Z

packages/utils/feed/markdown.ts

+};
+
+// HTML tags styles used by RenderHtml from react-native-render-html
+export const renderHtmlTagStyles: MixedStyleRecord = {


is it expected that the h1 has a space on top?

Headings vertical spaces and line height makes it thick

Top space to compensate the input's borders padding

Anyway, yes, the preview takes more space, we can't avoid that

n0izn0iz

we can merge and iterate

hthieu1110

LGTM

Is fiexed

n0izn0iz requested changes Dec 10, 2024

View reviewed changes

packages/components/socialFeed/SocialCard/cards/SocialArticleCard.tsx Show resolved Hide resolved

packages/components/socialFeed/NewsFeed/NewsFeedInput.tsx Outdated Show resolved Hide resolved

WaDadidou added 6 commits December 11, 2024 19:53

wip(article): Add MD support

b96c8a6

wip(article): Shrink content input

54af815

wip(article): Handle local images

fd54612

wip(article): Change lib for markdown render

78fb7e1

wip(article): Fix styles, looks good, remove unused libs, remove Arti…

3ea76d0

…cle tools

feat(article): Integrate Article MD creation and consultation

271f701

WaDadidou force-pushed the feat-feed-article-markdown branch from 12ef521 to 271f701 Compare December 12, 2024 00:53

WaDadidou changed the title ~~wip(article): Add MD support~~ feat(article): Add MD support Dec 12, 2024

WaDadidou marked this pull request as ready for review December 12, 2024 00:54

chore: yarn install

b6ec92f

WaDadidou force-pushed the feat-feed-article-markdown branch from 2bb197f to a8cab39 Compare December 12, 2024 01:34

fix(article): fix CI

6408c7a

WaDadidou force-pushed the feat-feed-article-markdown branch from a8cab39 to 6408c7a Compare December 12, 2024 01:50

WaDadidou and others added 3 commits December 12, 2024 13:19

fix(article): ArticleMarkdown md consultation, fix also ArticleMapPos…

91187c6

…t title numberOfLines

Merge branch 'main' into feat-feed-article-markdown

d82e7a7

Merge branch 'main' into feat-feed-article-markdown

28d91d1

n0izn0iz reviewed Dec 13, 2024

View reviewed changes

packages/screens/FeedNewArticle/components/ArticleContentEditor/utils.ts Outdated Show resolved Hide resolved

clegirar previously requested changes Dec 16, 2024

View reviewed changes

packages/screens/FeedNewArticle/FeedNewArticleScreen.tsx Show resolved Hide resolved

packages/screens/FeedNewArticle/FeedNewArticleScreen.tsx Show resolved Hide resolved

fix(article-md): Instantiate once markdownit

015b7de

fix(article-md): Use new cpt ScreenTitle

9c4bf23

n0izn0iz requested changes Dec 17, 2024

View reviewed changes

packages/utils/feed/markdown.ts Outdated Show resolved Hide resolved

WaDadidou added 6 commits December 18, 2024 12:57

fix(articles): Few design modifs

af89a05

Merge remote-tracking branch 'origin/main' into feat-feed-article-mar…

74ad2d9

…kdown

chore: yarn lint-fix

1978419

chore(lauchpad): Use ArticleMarkdown types

0aae569

fix(article-md): customize styles

d85401b

fix(article-md): fix import

e19e7a8

WaDadidou requested review from n0izn0iz and clegirar December 23, 2024 20:23

WaDadidou added enhancement New feature or request UX/UI Social Feed Everything related to the Social Feed labels Dec 23, 2024

fix(article-md): remove marginBottom from blockquote > p:first-child …

c2b53ba

…using domVisitors prop

hthieu1110 reviewed Dec 28, 2024

View reviewed changes

MikaelVallenet previously approved these changes Dec 28, 2024

View reviewed changes

fix(article-md): markdown styles in constants, TODOs added

a58719b

WaDadidou dismissed MikaelVallenet’s stale review via a58719b December 28, 2024 18:01

fix(article-md): Use Element from react-native-render-html

a1632dd

n0izn0iz reviewed Dec 29, 2024

View reviewed changes

n0izn0iz approved these changes Dec 29, 2024

View reviewed changes

Merge branch 'main' into feat-feed-article-markdown

ad5c97c

hthieu1110 approved these changes Dec 30, 2024

View reviewed changes

WaDadidou enabled auto-merge December 30, 2024 17:30

WaDadidou added this pull request to the merge queue Dec 30, 2024

github-merge-queue bot removed this pull request from the merge queue due to failed status checks Dec 30, 2024

n0izn0iz added this pull request to the merge queue Dec 30, 2024

Merged via the queue into main with commit 80f9ca4 Dec 30, 2024
23 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(article): Add MD support #1451

feat(article): Add MD support #1451

WaDadidou commented Dec 9, 2024 •

edited

Loading

netlify bot commented Dec 9, 2024 •

edited

Loading

netlify bot commented Dec 9, 2024 •

edited

Loading

clegirar commented Dec 16, 2024

clegirar commented Dec 16, 2024

MikaelVallenet commented Dec 16, 2024

MikaelVallenet commented Dec 16, 2024

WaDadidou commented Dec 16, 2024 •

edited

Loading

WaDadidou commented Dec 16, 2024 •

edited

Loading

hthieu1110 Dec 28, 2024

WaDadidou Dec 28, 2024 •

edited

Loading

WaDadidou Dec 28, 2024

hthieu1110 Dec 28, 2024

WaDadidou Dec 28, 2024

hthieu1110 Dec 28, 2024

WaDadidou Dec 28, 2024 •

edited

Loading

WaDadidou Dec 28, 2024

n0izn0iz Dec 29, 2024

WaDadidou Dec 30, 2024 •

edited

Loading

n0izn0iz left a comment

hthieu1110 left a comment

feat(article): Add MD support #1451

feat(article): Add MD support #1451

Conversation

WaDadidou commented Dec 9, 2024 • edited Loading

MarkdownIt

RenderHtml

Temporary stuff. Please take attention to that: At the final, we'll have only one Article category, type, view, etc. These stuff will be merged with the actual "Article" stuff, and the mention "Markdown" will be removed in the future

netlify bot commented Dec 9, 2024 • edited Loading

✅ Deploy Preview for gno-dapp ready!

netlify bot commented Dec 9, 2024 • edited Loading

✅ Deploy Preview for teritori-dapp ready!

clegirar commented Dec 16, 2024

clegirar commented Dec 16, 2024

MikaelVallenet commented Dec 16, 2024

MikaelVallenet commented Dec 16, 2024

WaDadidou commented Dec 16, 2024 • edited Loading

WaDadidou commented Dec 16, 2024 • edited Loading

hthieu1110 Dec 28, 2024

Choose a reason for hiding this comment

WaDadidou Dec 28, 2024 • edited Loading

Choose a reason for hiding this comment

WaDadidou Dec 28, 2024

Choose a reason for hiding this comment

hthieu1110 Dec 28, 2024

Choose a reason for hiding this comment

WaDadidou Dec 28, 2024

Choose a reason for hiding this comment

hthieu1110 Dec 28, 2024

Choose a reason for hiding this comment

WaDadidou Dec 28, 2024 • edited Loading

Choose a reason for hiding this comment

WaDadidou Dec 28, 2024

Choose a reason for hiding this comment

n0izn0iz Dec 29, 2024

Choose a reason for hiding this comment

WaDadidou Dec 30, 2024 • edited Loading

Choose a reason for hiding this comment

n0izn0iz left a comment

Choose a reason for hiding this comment

hthieu1110 left a comment

Choose a reason for hiding this comment

WaDadidou commented Dec 9, 2024 •

edited

Loading

netlify bot commented Dec 9, 2024 •

edited

Loading

netlify bot commented Dec 9, 2024 •

edited

Loading

WaDadidou commented Dec 16, 2024 •

edited

Loading

WaDadidou commented Dec 16, 2024 •

edited

Loading

WaDadidou Dec 28, 2024 •

edited

Loading

WaDadidou Dec 28, 2024 •

edited

Loading

WaDadidou Dec 30, 2024 •

edited

Loading